

<style>
/* 容器样式 */
.user-system {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee; /* 浅灰色边框 */
}

/* 表单区域样式 */
.form-area {
  margin-bottom: 30px;
  padding: 15px;
  background: #f5f5f5; /* 浅灰色背景 */
}

/* 用户列表表格样式 */
.user-list table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}

/* 禁用状态行样式 */
.disabled-row {
  opacity: 0.6;
  background: #f8f8f8; /* 更浅的禁用背景 */
}

/* 错误边框样式 */
.error-border {
  border: 2px solid red; /* 红色错误提示 */
}

/* 激活状态样式 */
.active-status {
  background: #4CAF50; /* 绿色背景 */
  color: white;
}

/* 禁用状态样式 */
.inactive-status {
  background: #ff4444; /* 红色背景 */
  color: white;
}

/* 管理员角色特殊样式 */
.admin-role {
  color: #2196F3; /* 蓝色文字 */
  font-weight: bold;
}
</style>